<template>
    <div class="add-zd-dialog">
    <!-- 修改字典 -->
    <appdialog ref="dialog"
               :visible="false"
               title="添加字典表"
               @confirm="confirmAdd"
               @cancle="cancleAdd"
               width="30%"
               >
    <el-form ref="addForm"
             :rules="rules"
             :model="addForm"
             label-width="100px">
    <el-form-item label="ID：" prop="id">
         <nameInput @change="changeID"
                    :defaultValue="addForm.id"> </nameInput>
    </el-form-item>
     <el-form-item label="类型：" prop="group">
         <nameInput @change="changeGroup"
                    :defaultValue="addForm.group"> </nameInput>
    </el-form-item>   
     <el-form-item label="键名：" prop="code">
         <nameInput @change="changeCode"
                    :defaultValue="addForm.code"> </nameInput>
    </el-form-item>   
     <el-form-item label="名称：" prop="name">
         <nameInput @change="changeName"
                    :defaultValue="addForm.name"> </nameInput>
    </el-form-item>   
     <el-form-item label="值：" prop="value">
         <nameInput @change="changeValue"
                    :defaultValue="addForm.value"> </nameInput>
    </el-form-item>
    <el-form-item label="备注：">
          <appTextarea @change="changeDESC"></appTextarea>
	</el-form-item>
             
    </el-form>
    </appdialog>
    </div>
</template>
<script>
import appdialog from "@/view/components/dialog/dialog";
import nameInput from "@/view/components/input/nameInput";
import appTextarea from "@/view/components/textarea/textArea";
import { save } from "@/service/swagger/AcDictController"

export default {
    name: "addZDDialog",
    components: {
        appdialog,
        nameInput,
        appTextarea
    },
    data() {
        return {
            addForm: {
                id: '',
                group: '',
                code: '',
                name: '',
                value: ''
            },
            rules: {
                id: [{ required: true, message: '请输入ID', trigger: 'blur' }],
                group: [{ required: true, message: '请输入类型', trigger: 'blur' }],
                code: [{ required: true, message: '请输入键名', trigger: 'blur' }],
                name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                value: [{ required: true, message: '请输入值', trigger: 'blur' }]
            }
        }
    },
    mounted() {

    },
    methods: {
        init(data) {
            this.addForm = data || {
                code: '',
                name: '',
                value: ''
            }
            for (let i in this.$refs) {
                if (this.$refs[i].reset) {
                    this.$refs[i].reset();
                }
            }
            return this;
        },
        open() {
            this.$refs.dialog.open()
        },
        confirmAdd() {
            //验证表单
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    //验证通过
                    this.submitAdd()
                } else {
                    setTimeout(() => {
                        this.open()
                    }, 50)
                    return false
                }
            })
        },
        submitAdd() {
            save({ ...this.addForm }).then(ret => {
                this.$message({
                    message: '创建成功',
                    type: 'success',
                    duration: 2000,
                });

                this.$refs.dialog.close();
                this.$emit("addSucess")
            })
        },
        cancleAdd() {

        },
        changeID(name, v) {
            console.log("环境选项改变：", name, v)
            this.addForm.id = v;
        },
        changeGroup(name, v) {
            console.log("环境选项改变：", name, v)
            this.addForm.group = v;
        },
        changeCode(name, v) {
            console.log("环境选项改变：", name, v)
            this.addForm.code = v;
        },
        changeName(name, v) {
            console.log("环境选项改变：", name, v)
            this.addForm.name = v;
        },
        changeValue(name, v) {
            console.log("环境选项改变：", name, v)
            this.addForm.value = v;
        },
        changeDESC(name, v) {
            console.log("备注改变：", name, v)
        }
    }

}
</script>
<style scoped lang="scss">
@import "../../../styles/variables.scss";
</style>

